<template>
    <div class="bgColorF">
        <el-upload
            class="upload-demo pdL10 pdR10"
            drag
            multiple
            :action="uploadAction"
            :data="uploadFormData"
            :accept="uploadFileSuffix"
            :limit="uploadFileMaxNum"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="uploadBefore"
            :disabled="props.fileTypeID ? false : true"
        >
            <el-icon class="el-icon--upload" :style="{ height: uploadHeight }"
                ><upload-filled
            /></el-icon>
            <div class="el-upload__text">
                <div v-if="props.fileTypeID">
                    拖动文件到这里 或者 <em>点击上传文件</em>
                </div>
                <div v-else>请选择所属文件夹再上传文件</div>
            </div>
            <template #tip>
                <div class="el-upload__tip color9 fs14" v-if="props.fileTypeID">
                    注：上传文件支持的后缀名：
                    <label class="colorR bold">
                        {{ uploadFileSuffix }}
                    </label>
                    <div class="pdL28">
                        每个文件不超过
                        <label class="colorR bold">
                            {{ uploadFileMaxSize }}KB
                        </label>

                        ，每次可上传文件数量为
                        <label class="colorR bold">
                            {{ uploadFileMaxNum }}
                        </label>
                    </div>
                </div>
            </template>
        </el-upload>
        <div class="footer">
            <el-button ghost @click="closeUploadDrawer">关 闭</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { getLocal } from "@/store/funcs";

const props = defineProps({
    fileTypeID: {
        type: String,
        default: "",
    },
    folder_name: {
        type: String,
        default: "",
    },
    extractTreeData: Array,
});

const emits = defineEmits(["btnUploadDrawer", "btnUpdateList"]);

const store = useStore();
const { proxy } = getCurrentInstance() as any;
const userInfo: any = ref({});

const uploadFileSuffix = ref(process.env.VUE_APP_UPLOAD_FILE_SUFFIX);
const uploadFileMaxSize = ref(
    parseInt(process.env.VUE_APP_UPLOAD_FILE_MAX_SIZE)
);
const uploadFileMaxNum = ref(parseInt(process.env.VUE_APP_UPLOAD_FILE_MAX_NUM));

const uploadHeight = ref((document.body.clientHeight / 5).toFixed(0) + "px");
const uploadAction = ref("");
const uploadFormData: any = ref([]);

onMounted(() => {
    const myLocalData = getLocal("myLocalData");
    if (myLocalData && myLocalData.account) {
        userInfo.value = myLocalData;
    }
});

const closeUploadDrawer = () => {
    emits("btnUploadDrawer");
};

const getUploadAction = () => {
    const tmpToken = {
        op: "upload",
        type_id: props.fileTypeID,
        folder_name: props.folder_name,
        extractTreeData: JSON.stringify(props.extractTreeData),
        file_type: 1,
        account: userInfo.value.account,
    };
    uploadAction.value =
        process.env.VUE_APP_API_URL +
        "user/uploads?account=" +
        userInfo.value.account +
        "&type_id=" +
        props.fileTypeID +
        "&folder_name=" +
        props.folder_name;
    uploadFormData.value["params"] = JSON.stringify(tmpToken);
};
const uploadSuccess = (res: any, file: any) => {
    if (res.code == 1) {
        emits("btnUpdateList");
        ElMessage({
            type: "success",
            message: res.msg,
        });
    } else {
        ElMessage({
            type: "error",
            message: res.msg,
        });
    }
    return false;
};
const uploadError = (file: any) => {
    ElMessage({
        type: "error",
        message: "上传失败",
    });
    return false;
};
const uploadBefore = (file: any) => {
    if (!props.fileTypeID) {
        ElMessage({
            type: "error",
            message: "请选择所属文件夹再上传文件",
        });
        return false;
    }

    var tmpSize: any = parseInt(file.size) / 1024;
    if (parseInt(tmpSize) > uploadFileMaxSize.value) {
        ElMessage({
            type: "error",
            message: "上传文件大小不能超过 " + uploadFileMaxSize.value + "KB",
        });
        return false;
    }
    getUploadAction();
};

onUnmounted(() => {});
</script>
